<template>
  <div class="app-container">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" size="small" class="designer-form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" class="designer-input" placeholder="请填写用户名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" class="designer-input" placeholder="请填写手机号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="商户名称" prop="merchant_name">
            <el-input v-model="form.merchant_name" class="designer-input"  placeholder="请填写真实姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="搜索权重" prop="custom_index">
            <el-input-number v-model="form.custom_index" class="designer-input" controls-position="right"  :min="1" :max="100"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="头像" required>
            <el-upload
              class="avatar-uploader el-upload-box"
              action="https://up-z2.qiniup.com"
              :on-success="handleCoverSuccess"
              :before-upload="beforeCoverUpload"
              :show-file-list="false"
              accept="image/*"
              :data="uploadData"
            >
              <img v-if="coverImg.url" :src="coverImg.url" class="avatar">
              <i class="avatar-uploader-icon avatar el-icon-plus" v-else></i>
            </el-upload>
            <div class="recommended-style">推荐上传尺寸为720*720</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="个人主页背景图">
            <el-upload
              style="float:left;"
              class="avatar-uploader el-upload-box"
              action="https://up-z2.qiniup.com"
              :on-success="handleCoverSuccessBackground"
              :before-upload="beforeCoverUploadBackground"
              :show-file-list="false"
              accept="image/*"
              :data="uploadData"
            >
              <img v-if="background.url" :src="background.url" class="avatar" style="width: 195px;">
              <i v-else :class="['avatar-uploader-icon', 'avatar', 'el-icon-plus']" style="width: 195px;"></i>
            </el-upload>
            <el-upload
              class="avatar-uploader el-upload-box"
              action="https://up-z2.qiniup.com"
              :on-success="handleCoverSuccessBackground1"
              :before-upload="beforeCoverUploadBackground1"
              :show-file-list="false"
              accept="image/*"
              :data="uploadData"
            >
              <img v-if="background1.url" :src="background1.url" class="avatar" style="width: 195px;">
              <i v-else :class="['avatar-uploader-icon', 'avatar', 'el-icon-plus']" style="width: 195px;"></i>
            </el-upload>
            <div class="recommended-style">推荐上传尺寸为1920*1200</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="地址" prop="address">
            <el-input class="input-w" v-model="form.address"  placeholder="请填写地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型">
            <el-select
              class="designer-input"
              v-model="form.title"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择风格">
              <el-option
                v-for="(item,index) in titleOptions"
                :key="index"
                :label="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!--<el-form-item>-->
        <!--<div v-html="">{{form.introduction}}</div>-->
        <!--<el-button @click="text()">123</el-button>-->
      <!--</el-form-item>-->

      <el-form-item label="简介">
        <tinymce :height="250" v-model="form.introduction"  placeholder="请填写简介"></tinymce>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确认提交</el-button>
        <el-button @click="goBack">返 回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { YEARS_ORIGIN, STYLE_ORIGIN, TYPE_ORIGIN } from '../../../utils/dic'
  // import { admin_merchant_detail, admin_merchant_put, admin_merchant_add } from '../../../api/index'
  import axios from 'axios'
  import Tinymce from '@/components/Tinymce'

  export default {
    components: {
      Tinymce
    },
    data() {
      return {
        titleOptions: [
          { key: 6, value: '居民代表' },
          { key: 5, value: '议事会成员' },
          { key: 1, value: '木业' },
          { key: 2, value: '农业' },
          { key: 3, value: '家居' },
          { key: 4, value: '酒店' }
        ],
        years: YEARS_ORIGIN,
        style: STYLE_ORIGIN,
        type: TYPE_ORIGIN,
        form: {
          background_image: []
        },
        qiniuUrl: 'http://pe0c33epi.bkt.clouddn.com/',
        uploadData: {
          token: '',
          key: ''
        },
        coverImg: {},
        background: {},
        background1: {},
        rules: {
          username: [
            { required: true, message: '请填写用户名', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请填写手机号', trigger: 'blur' }
          ],
          merchant_name: [
            { required: true, message: '请填写真实姓名', trigger: 'blur' }
          ],
          avatar: [
            { required: true, message: '请选择图片', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请填写地址', trigger: 'blur' }
          ],
          custom_index: [
            { required: true, message: '请填写搜索权重', trigger: 'blur' }
          ]
        },
        projectId: 0
      }
    },
    methods: {
      handleCoverSuccess(res, file) {
        file.url = this.qiniuUrl + res.key
        this.coverImg = file
        // console.log(file)
      },
      handleCoverSuccessBackground(res, file) {
        file.url = this.qiniuUrl + res.key
        this.background = file
        // console.log(file)
      },
      handleCoverSuccessBackground1(res, file) {
        file.url = this.qiniuUrl + res.key
        this.background1 = file
        // console.log(file)
      },
      beforeCoverUpload(file) {
        if (this.beforeUploadValidate(file)) {
          return axios({
            method: 'get',
            url: 'https://sjh.xmmost.com/api/qiniu/token',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.uploadData = {
              key: res.data.data.key,
              token: res.data.data.token
            }
            // console.log(this.uploadData)
            this.form.avatar = this.uploadData.key
          })
        } else {
          return false
        }
      },
      beforeCoverUploadBackground(file) {
        if (this.beforeUploadValidate(file)) {
          return axios({
            method: 'get',
            url: 'https://sjh.xmmost.com/api/qiniu/token',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.uploadData = {
              key: res.data.data.key,
              token: res.data.data.token
            }
            // console.log(this.uploadData)
            // this.form.background_image = this.uploadData.key + this.form.background_image
            this.form.background_image[0] = this.uploadData.key
          })
        } else {
          return false
        }
      },
      beforeCoverUploadBackground1(file) {
        if (this.beforeUploadValidate(file)) {
          return axios({
            method: 'get',
            url: 'https://sjh.xmmost.com/api/qiniu/token',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.uploadData = {
              key: res.data.data.key,
              token: res.data.data.token
            }
            // console.log(this.uploadData)
            // this.form.background_image = this.uploadData.key + this.form.background_image
            this.form.background_image[1] = this.uploadData.key
          })
        } else {
          return false
        }
      },
      beforeUploadValidate(file) {
        if (!file.type.startsWith('image')) {
          this.$message({ message: '仅支持图片格式文件', type: 'warning' })
          return false
        }
        if (file.size > 1024 * 1024 * 2) {
          this.$message({ message: '图片大小不能超过2MB', type: 'warning' })
          return false
        }
        return true
      },
      submitForm(formName) {
        if (!this.form.avatar) {
          this.$message({ type: 'warning', message: '请上传头像' })
          return
        }
        // this.form.background_image = JSON.stringify(this.form.background_image)
        console.log(this.form)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.projectId) {
              // admin_merchant_put(this.form).then(res => {
              //   console.log(res)
              //   this.$message({ type: 'success', message: '修改成功' })
              //   this.$router.push({ name: 'merchantsManagement' })
              // })
            } else {
              // admin_merchant_add(this.form).then(res => {
              //   console.log(res)
              //   this.$message({ type: 'success', message: '添加成功' })
              //   this.$router.push({ name: 'merchantsManagement' })
              // })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      goBack() {
        this.$router.go(-1)
      },
      getInfo(id) {
        // const params = {
        //   id: id
        // }
        // admin_merchant_detail(params).then(res => {
        //   console.log(res)
        //   this.form = res
        //   this.coverImg.url = this.qiniuUrl + res.avatar
        //   if (res.background_image.length === 1) {
        //     this.background.url = this.qiniuUrl + res.background_image[0]
        //   } else if (res.background_image.length === 2) {
        //     this.background.url = this.qiniuUrl + res.background_image[0]
        //     this.background1.url = this.qiniuUrl + res.background_image[1]
        //   }
        // })
      }
    },
    mounted() {
      // console.log(this.$route.params)
      this.$route.params.id = parseInt(this.$route.params.id)
      if (this.$route.params.id !== 0) {
        console.log(123)
        this.projectId = this.$route.params.id
        this.getInfo(this.$route.params.id)
      }
    }
  }
</script>

<style src="" lang="scss" scoped>

</style>
